<template>
	<view>
		<!-- tabbar -->
		<view class="tabBar">
			<view class="tab-item" v-for="item in tabBarList" :key="item.index" @tap="choose(item.index)" >
			<view :class="{active:item.index == currentIndex}" >{{ item.name }}</view>
				<view class="arrbox" v-if="item.index==1||item.index==2">
					<!-- <image src="../../../static/icons/up.png" mode="" v-if="item.currentIconSelect== 'up'?  'true':'false'  "></image>
					<image src="../../../static/icons/active-up.png" mode="" v-if="activeUp"></image> -->
					<!-- <image src="../../../static/icons/down.png" mode=""></image>
					
					<image src="../../../static/icons/active-down.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<!-- 商品列表 -->

		<view class="product-list" v-if="num != '0'">
			<view class="product-item" v-for="item in categoryList" :key='item.id' @tap="GogoodsInfo(item.id)">
				<view class="product-img">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="product-desc">
					<view class="item-name">
						{{item.name}}
					</view>
					<view class="item-price">
						<view class="item-prices">
							￥{{item.price}}
						</view>
						<view class="leju">
							乐居
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="noMore" v-if="flag">
			没有更多数据了
		</view>
	</view>

</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import {
		Category,
		findProduct
	} from "../../../utils/kind/index.js"
	
	export default {
		components: {uniIcons},
		data() {
			return {
				tabBarList: [{
						name:"新品",
						index:0
					},
					{
						name:"销量",
						index:1,
						currentIconSelect:"" ,//"" up  down 
					},
					{
						name:"价格",
						index:2,
						currentIconSelect:"" ,//"" up  down 
					},
					{
						name:"筛选",
						index:3
					},],
				currentIndex: 0,
				categoryList: [],
				num: '',
				flag: "",
				flags: true,
				id:"",
				start:1,
				limit:5,
				sortBy:"",
				isDesc:"",
				up:true,
				activeUp:false
			}
		},
		methods: {
			init(){
				findProduct(this.start,this.limit,{
					sortBy:this.sortBy,
					isDesc:this.isDesc
				}).then(res=>{
					// console.log(res)
					this.categoryList = res.data.rows
					this.num = this.categoryList.length
					// console.log(this.num)
					if (this.num == '0') {
						this.flag = true
					}
				})
			},
			choose(index) {
				console.log(index)
				this.currentIndex = index
				if(index==1){
					this.up=false
					this.activeUp=true
				}
				this.init()
			},
			GogoodsInfo(id){
				uni.navigateTo({
					url:'/pages/goodsInfo/goodsInfo?id='+id
				})
			}
			
		},
		onLoad(options) {
			const id = options.id
			this.id=id
			
			// Category(
			// 	id
			// ).then(res=>{
			// 	console.log(res)
			// })
			
			// 	findProduct('1', '5', {
			// 		categoryId: id,
			// 		isDesc: 0
			// 	}).then(res => {
			// 		console.log(res)
			// 		this.categoryList = res.data.rows
			// 		this.num = this.categoryList.length
			// 		console.log(this.num)
			// 		if (this.num == '0') {
			// 			this.flag = true
			// 		}
			// 	})
			
			this.init()
		}
	}
</script>

<style scoped lang="scss">
	.tabBar {
		position: fixed;
		left: 0;
		top: 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 62rpx;
		padding-top: 14rpx;
		background-color: #354e44;
		color: #fff;
		font-size: 30rpx;
		line-height: 62rpx;
		z-index: 999;
		.tab-item{
			position: relative;
		}
		.arrbox{
			margin: 0;
			padding: 0;
			line-height: 0;
			position: absolute;
			width: 24rpx;
			height: 32rpx;
			left: 70rpx;
			top: 15rpx;
			image{
				width: 100%;
				height: 16rpx;
			}
		}
		.active {
			color: #dd524d;

		}
	}

	.product-list {
		width: 90%;
		margin: 0 auto;
		margin-top: 120rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.product-item {
			width: 316rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 40rpx;

			.product-img {
				width: 100%;
				height: 238rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-desc {
				padding: 36rpx;
				font-size: 26rpx;

				.item-name {
					color: #3e3e3e;
					line-height: 38rpx;
					margin-top: 8rpx;
					font-weight: 700;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.item-price {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
				}
			}
		}
	}

	.noMore {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #777;
	}
</style>
